<template lang="html">
  <div class="flex" style="padding: 15px;">
    <div class="form-inline auto">
      <div class="form-group auto">
        <label for="startDate">开始日期:</label>
        <datepicker id="startDate" placeholder="开始日期"
          v-model="model.startDate"
          :value.sync="model.startDate"
          :disabled-days-of-Week="[]"
          :format="'yyyy-MM-dd'"
          :show-reset-button="reset">
        </datepicker>
        </div>
        <div class="form-group auto">
        <label for="endDate">结束日期:</label>
        <datepicker id="endDate" placeholder="结束日期"
          v-model="model.endDate"
          :value.sync="model.endDate"
          :disabled-days-of-Week="[]"
          :format="'yyyy-MM-dd'"
          :show-reset-button="reset">
        </datepicker>
      </div>
    </div>
    <div class="flex">
      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;">
        <div  style="flex: 1;border-right: 1px dashed #888;">
          <site-manager :startdate='model.startDate' :enddate='model.endDate' v-ref:pay ></site-manager>
        </div>
        <div  style="flex: 1;">
          <bank-manager :startdate='model.startDate' :enddate='model.endDate' v-ref:pay></bank-manager>
        </div>
      </div>
      <div class="flex-row" style="flex: 1;">

        <div class="flex-row" style="flex: 1;">
          <div  style="flex: 1;">
            <paymentpie :startdate='model.startDate' :enddate='model.endDate' v-ref:pay ></paymentpie>
          </div>
          <div style="flex: 1;border-right: 1px dashed #888;">
            <usertype-pie :startdate='model.startDate' :enddate='model.endDate'  v-ref:pay ></usertype-pie>
          </div>
        </div>

        <div style="flex: 1;">
          <bussiness-type :startdate='model.startDate' :enddate='model.endDate'  v-ref:pay ></bussiness-type>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import * as Util from '../../../Util'
export default {
  data() {
    return {
      model: {
        startDate: Util.toStandardDateString(),
        endDate: Util.toStandardDateString()
      },
    }
  },
  methods: {
    searchdata() {
      this.$refs.pay.searchdata()
    }
  }
}
</script>

<style lang="css">
</style>
